<template>
 <div class="Features">
  <div class="box">
   <h6>{{ $t('home.features.title') }}</h6>

   <el-row :gutter="12" class="iconTable">
    <el-col v-for="(item, index) of list" :key="index" :span="7">
     <el-card shadow="hover">
      <img :src="item.image" alt="">

      <h6>{{ item.name }}</h6>

      <p>{{ item.content }}</p>
     </el-card>
    </el-col>
   </el-row>
  </div>
 </div>
</template>

<script>
export default {
 name: "Features",
 data: () => ({
  list: [
   {
    name: 'Multiple',
    image: require('@/assets/new_product_1.png'),
    content: 'Multi-dimensional assets management plans like optimizing the aggregator and clearing plan'
   },
   {
    name: 'Safe',
    image: require('@/assets/new_product_2.png'),
    content: 'Provide insurance services in the sense of hedging assets price changes through decentralized option agreements'
   },
   {
    name: 'Innovative',
    image: require('@/assets/new_product_3.png'),
    content: 'Explore and deploy emerging business formats such as DeFi insurance and derivatives'
   },
  ]
 }),
 created() {
  this.onChange()
 },
 methods: {
  // 切换语言
  onChange () {
   const lang = [
    {
     name: this.$t('home.features.name1'),
     text: this.$t('home.features.text1')
    },
    {
     name: this.$t('home.features.name2'),
     text: this.$t('home.features.text2')
    },
    {
     name: this.$t('home.features.name3'),
     text: this.$t('home.features.text3')
    }
   ];
   this.list.forEach((item, index) => {
    item.name = lang[index].name;
    item.content = lang[index].text;
   })
  }
 },
 watch:{
  '$i18n.locale' (a,b){
   this.onChange()
  }
 }
}
</script>

<style scoped lang="scss">
.Features {
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #ffffff;
 padding: 100px 0;

 .box {
  max-width: 935px;
  width: 95%;
  display: flex;
  flex-direction: column;

  >h6 {
   font-size: 35px;
   text-align: center;
   color: #002445;
   margin: 0 auto 60px;
   border-bottom: 3px solid #0d4fa5;
   padding: 0 40px 10px;
  }

  .iconTable {
   display: flex;
   flex-wrap: wrap;

   .el-col {
    min-height: 330px;
    &:nth-of-type(2) {
     margin: auto;
    }

    .el-card {
     border: none;
     padding: 40px 20px;
     background-color: #F5FAFF;
     height: 100%;

     /deep/ .el-card__body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0;

      img {
       margin: 20px 0;
       width: 120px;
      }

      h6 {
       margin-top: 15px;
       color: #002445;
       font-size: 16px;
       font-weight: bold;
      }

      p {
       margin-top: 15px;
       font-size: 16px;
       color: #b3bdc7;
       line-height: 20px;
       text-align: center;
       font-weight: bold;
      }
     }
    }
   }
  }
 }
}
</style>
